<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>ByteDance</title>

        <style>

            *{
                margin:0;
                padding: 0;
                box-sizing: border-box;
            }
            html{
                line-height: 1px;
            }
            .home{
                height: 100%;
                width: 100%;
                background: gray;
                margin: 0 auto;
            }
            .home_header{
                height: 88px;
                width: 100%;
               /* background: yellow;*/
                line-height: 88px;
                overflow: hidden;
                position: fixed;
            }
            .header_log{
                margin-left: 79px;
                width: 130px;
            }
            .header_right{
               /* background: black;*/
                float: right;
                width: 651px;
                height: 58px;
                overflow: hidden;
            }
            .nav{
                height: 31px;
                white-space: nowrap;
                /*background: #db0000;*/
            }
            .margin_left{
                margin-top: 26px;
                margin-right: 80px;
                width: 460px;
                float: left;
            }
            .margin_right{
                margin-right: 80px;
                width: 31px;
                height: 58px;
                background-color: hsla(0,0%,100%,.2);
                float: right;
                color: #f8f7fb;
                border-radius: 0 0 4px 4px;
                text-align: center;
            }
            .header_language{

            }
            .nav_item{
                margin-right: 50px;
                float: left;
            }
            .nav_link{
                font-weight: 500;
                box-sizing: border-box;
                height: 31px;
                font-size: 13px;
                text-decoration: none;
                cursor: pointer;
                line-height: 31px;
                display: inline-block;
            }
            .nav_link_white{
                /*background: black;*/
                color: #f8f9fb;
            }
            .nav_link_white.active{
                border-bottom: 2px solid #f8f7fb;
            }
            .home_img{
                height: 752px;
                background-image: url("home.jpg");
                overflow-y: hidden;
                background-repeat: no-repeat;
                background-size: cover;
            }
            .dd{
                height: 752px;
                width: 100%;
                background: black;
            }
            .text{
                color: #fff;
            }
            .first{
                /*background: #db0000;*/
               /*margin: 300px auto;*/
                position:absolute;
                top: 293px;
                left: 380px;
                width: 773px;
                height: 64px;
                line-height: 2;
                text-align: center;
                font-size: 16px;
                font-weight: 500;
            }
            p {
                display: block;
                margin-block-start: 1em;
                margin-block-end: 1em;
                margin-inline-start: 0px;
                margin-inline-end: 0px;
            }
            .know_more{
                position: absolute;
                top:400px;
                left: 730px;
                height: 17px;
                width: 72px;
                color: white;
            }
            .know_more_text{
                overflow: hidden;
                float: left;
                height: 100%;
                line-height: 17px;
                font-size: 14px;
                font-weight: 600;
                vertical-align: middle;
                display: inline-block;
            }
            .know-more__triangle{
                margin-top: 4px;
                float: right;
                height: 0;
                width: 0;
                border-left: 6px solid #fff;
                border-top: 4px solid transparent;
                border-bottom: 4px solid transparent;
                display: inline-block;
            }



        </style>

    </head>
    <body>

    <div class="home">
        <div class="home_header">
            <a href="http://bytedance.com">
                <img class="header_log" src="header.png">
            </a>

            <div class="header_right">
                <div class="nav margin_left">
                    <a class="nav_item nav_link nav_link_white active" aria-current="page" href="http://bytedance.com/zh">
                        <span>主页</span>
                    </a>
                    <a class="nav_item nav_link nav_link_white">
                        <span>关于我们</span>
                    </a>
                    <a class="nav_item nav_link nav_link_white">
                        <span>企业社会责任</span>
                    </a>
                    <a class="nav_item nav_link nav_link_white">
                        <span>媒体报道</span>
                    </a>
                    <a class="nav_item nav_link nav_link_white">
                        <span>加入我们</span>
                    </a>
                </div>
                <div class="header_language margin_right">
                    <span>中</span>
                </div>
            </div>
        </div>
        <div class="home_img">
            <div class="white"></div>

            <div class="text first">
                <p>字节跳动成立于2012年3月，目前公司的产品和服务已覆盖全球150个国家和地区、75个语种，在40多个国家和地区位居应用商店总榜前列</p>
            </div>

            <a target="_blank" href="http://bytedance.com/zh/about">
                <div class="know_more">
                    <span class="know_more_text">了解更多</span>
                    <span class="know-more__triangle" style="margin-left: 10px; border-left-color: rgb(255, 255, 255);"></span>
                </div>
            </a>
            <div>
                
            </div>

        </div>

        <div class="dd"></div>
    </div>

    </body>
</html>